<template>
  <div>
    <h2>我是孙子组件</h2>
    <button @click="dispatch('hello', msg)">点击向爷爷发送消息</button>
  </div>
</template>

<script>
export default {
  name: 'grandson',
  data () {
    return {
      msg: '孙子组件的消息'
    }
  },
  methods: {
    // 定义一个dispatch方法，指定要派发事件名称和数据
    dispatch (eventName, data) {
      let parent = this.$parent
      // 只要还存在父元素就继续往上查找
      while (parent) {
        // 父元素用$emit触发
        parent.$emit(eventName, data)
        // 递归查找父元素
        parent = parent.$parent
      }
    }
  }
}
</script>
